<template>
  <div>
    <h2>人数统计</h2>
    <div id="chartthree" class="three"></div>
  </div>
</template>
    
<script setup>
import { inject, onMounted, reactive, ref } from "vue";
import link from "../api/link";
import url from "../api/urls";

//楼层
const louceng = ref([]);
const people = ref([]);

let $echarts = inject("echarts");

onMounted(() => {
  let myChart = $echarts.init(document.getElementById("chartthree"));

  link(url.chartDataOne).then((res) => {
    // console.log(res.data);
    res.data.map((res) => {
      louceng.value.push(res.title);
      people.value.push(res.num);
    });
    const option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },

      legend: {},
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        type: "value",
        boundaryGap: [0, 0.01],
      },
      yAxis: {
        type: "category",
        data: louceng.value,
      },
      series: [
        {
          name: "2012",
          type: "bar",
          data: people.value,
          itemStyle: {
            borderRadius: [0, 20, 20, 0],
            color: new $echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "#DC8BA3",
              },
              {
                offset: 0.5,
                color: "#BE8BDC",
              },
              {
                offset: 1,
                color: "#B0C9E5",
              },
            ]),
          },
        },
      ],
    };
    myChart.setOption(option);
  });
});
</script>
    
    <style lang="scss" scoped>
h2 {
  height: 22px;
  color: #fff;
  line-height: 22px;
  text-align: center;
  font-size: 12px;
}
.three {
  height: 280px;
}
</style>